<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        font-size: 12px;
        border: 1px black solid;
        border-collapse: collapse;
        text-align: center;
      }

      td,
      tr {
        font-size: 12px;
        border: 1px black solid;

        padding: 5px;
      }
    </style>
  </head>
  <body>
    <form action="/set_name">
      <input type="text" name="name" placeholder="用户名" />
      <button>提交</button>
    </form>

    <table class="table">
      <thead>
        <%if (Users.length > 0) {%>
          <caption>
          学生表
        </caption>
        <tr>
          <td>学号</td>
          <td>名字</td>
          <td>年龄</td>
          <td>性别</td>
          <td>地址</td>
          <td colspan="2">修改</td>
        </tr>
        <%}else{  %>
          <h1>学生表内没有内容</h1>
          <% }  %>
      </thead>
      <tbody>
        <% for (const i of Users) { %>
        <tr>
          <td><%= i.id %></td>
          <td><%= i.name%></td>
          <td><%= i.age %></td>
          <td><%= i.gender %></td>
          <td><%= i.address %></td>
          <td><a 
            <% /* 
                  设定一个事件,返回一个true和false,然后为false.则会取消默认行为,也就取消向我们的服务器发送报文
            */ %>
            onclick="return confirm('是否要删除表格')"
            href="/del_Users?id=<%=i.id%>">删除</a></td>
          <td><a href="/res_Users?id=<%=i.id%>">修改</a></td>
        </tr>
        <% }%>
      </tbody>
    </table>
    <hr />
    <form action="/add-students" method="post">
      <div>姓名:<input type="text" name="name" /></div>
      <div>年龄:<input type="number" name="age" max="150" min="0" /></div>
      <div>
        性别： <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女
      </div>
      <div>地址:<input type="text" name="address" /></div>
      <button>提交</button>
    </form>
  </body>
</html>
